<template>
    <v-container>
        <h1 class="text-h4 mb-6">SelectUser 组件使用示例</h1>

        <v-row>
            <!-- 基础用法 -->
            <v-col cols="12" md="6">
                <v-card class="mb-4">
                    <v-card-title>基础用法</v-card-title>
                    <v-card-text>
                        <SelectUser v-model="selectedUser1" label="选择用户" @user-selected="handleUserSelect1" />
                        <div v-if="selectedUser1" class="mt-3">
                            <v-alert type="info" density="compact">
                                已选择: {{ selectedUser1.name }} ({{ selectedUser1.email }})
                            </v-alert>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>

            <!-- 带头像显示 -->
            <v-col cols="12" md="6">
                <v-card class="mb-4">
                    <v-card-title>显示邮箱在选中项</v-card-title>
                    <v-card-text>
                        <SelectUser v-model="selectedUser2" label="选择用户" :show-email-in-selection="true"
                            @user-selected="handleUserSelect2" />
                        <div v-if="selectedUser2" class="mt-3">
                            <v-alert type="success" density="compact">
                                已选择: {{ selectedUser2.name }}
                            </v-alert>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>

            <!-- 按部门过滤 -->
            <v-col cols="12" md="6">
                <v-card class="mb-4">
                    <v-card-title>按部门过滤</v-card-title>
                    <v-card-text>
                        <v-select v-model="selectedDepartment" :items="departments" label="选择部门" variant="outlined"
                            density="comfortable" class="mb-3" />
                        <SelectUser v-model="selectedUser3" label="选择用户" :filter-by-department="selectedDepartment"
                            @user-selected="handleUserSelect3" />
                        <div v-if="selectedUser3" class="mt-3">
                            <v-alert type="warning" density="compact">
                                已选择: {{ selectedUser3.name }} - {{ selectedUser3.department }}
                            </v-alert>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>

            <!-- 排除特定用户 -->
            <v-col cols="12" md="6">
                <v-card class="mb-4">
                    <v-card-title>排除特定用户</v-card-title>
                    <v-card-text>
                        <SelectUser v-model="selectedUser4" label="选择用户 (排除张三和李四)" :exclude-users="['1', '2']"
                            @user-selected="handleUserSelect4" />
                        <div v-if="selectedUser4" class="mt-3">
                            <v-alert type="error" density="compact">
                                已选择: {{ selectedUser4.name }}
                            </v-alert>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>

            <!-- 紧凑样式 -->
            <v-col cols="12" md="6">
                <v-card class="mb-4">
                    <v-card-title>紧凑样式</v-card-title>
                    <v-card-text>
                        <SelectUser v-model="selectedUser5" label="选择用户" density="compact" variant="solo"
                            @user-selected="handleUserSelect5" />
                    </v-card-text>
                </v-card>
            </v-col>

            <!-- 只显示活跃用户 -->
            <v-col cols="12" md="6">
                <v-card class="mb-4">
                    <v-card-title>只显示活跃用户</v-card-title>
                    <v-card-text>
                        <SelectUser v-model="selectedUser6" label="选择活跃用户" filter-by-status="active"
                            @user-selected="handleUserSelect6" />
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>

        <!-- 使用示例代码 -->
        <v-card class="mt-6">
            <v-card-title>使用示例代码</v-card-title>
            <v-card-text>
                <v-expansion-panels>
                    <v-expansion-panel>
                        <v-expansion-panel-title>基础用法</v-expansion-panel-title>
                        <v-expansion-panel-text>
                            <pre class="code-block">
&lt;template&gt;
  &lt;SelectUser 
    v-model="selectedUser"
    label="选择用户"
    @user-selected="handleUserSelect"
  /&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { ref } from 'vue';
import SelectUser from '@/components/SelectUser.vue';
import type { UserInfo } from '@/components/SelectUser.vue';

const selectedUser = ref&lt;UserInfo | null&gt;(null);

function handleUserSelect(user: UserInfo | null) {
  console.log('选中用户:', user);
}
&lt;/script&gt;</pre>
                        </v-expansion-panel-text>
                    </v-expansion-panel>

                    <v-expansion-panel>
                        <v-expansion-panel-title>高级用法</v-expansion-panel-title>
                        <v-expansion-panel-text>
                            <pre class="code-block">
&lt;SelectUser 
  v-model="selectedUser"
  label="选择用户"
  placeholder="请选择一个用户"
  variant="outlined"
  density="comfortable"
  :show-email-in-selection="true"
  filter-by-department="技术部"
  filter-by-status="active"
  :exclude-users="['1', '2']"
  prepend-inner-icon="mdi-account"
  @user-selected="handleUserSelect"
  @search="handleSearch"
/&gt;</pre>
                        </v-expansion-panel-text>
                    </v-expansion-panel>

                    <v-expansion-panel>
                        <v-expansion-panel-title>组件 Props</v-expansion-panel-title>
                        <v-expansion-panel-text>
                            <v-table density="compact">
                                <thead>
                                    <tr>
                                        <th>属性</th>
                                        <th>类型</th>
                                        <th>默认值</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>modelValue</td>
                                        <td>UserInfo | string | null</td>
                                        <td>null</td>
                                        <td>选中的用户对象或用户ID</td>
                                    </tr>
                                    <tr>
                                        <td>label</td>
                                        <td>string</td>
                                        <td>'选择用户'</td>
                                        <td>输入框标签</td>
                                    </tr>
                                    <tr>
                                        <td>placeholder</td>
                                        <td>string</td>
                                        <td>'请选择用户'</td>
                                        <td>占位符文本</td>
                                    </tr>
                                    <tr>
                                        <td>showEmailInSelection</td>
                                        <td>boolean</td>
                                        <td>false</td>
                                        <td>选中项是否显示邮箱</td>
                                    </tr>
                                    <tr>
                                        <td>filterByDepartment</td>
                                        <td>string</td>
                                        <td>-</td>
                                        <td>按部门过滤用户</td>
                                    </tr>
                                    <tr>
                                        <td>filterByStatus</td>
                                        <td>'active' | 'inactive' | 'all'</td>
                                        <td>'all'</td>
                                        <td>按状态过滤用户</td>
                                    </tr>
                                    <tr>
                                        <td>excludeUsers</td>
                                        <td>string[]</td>
                                        <td>-</td>
                                        <td>排除的用户ID列表</td>
                                    </tr>
                                    <tr>
                                        <td>includeUsers</td>
                                        <td>string[]</td>
                                        <td>-</td>
                                        <td>只包含的用户ID列表</td>
                                    </tr>
                                </tbody>
                            </v-table>
                        </v-expansion-panel-text>
                    </v-expansion-panel>

                    <v-expansion-panel>
                        <v-expansion-panel-title>组件事件</v-expansion-panel-title>
                        <v-expansion-panel-text>
                            <v-table density="compact">
                                <thead>
                                    <tr>
                                        <th>事件</th>
                                        <th>参数</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>update:modelValue</td>
                                        <td>UserInfo | null</td>
                                        <td>用户选择变化时触发</td>
                                    </tr>
                                    <tr>
                                        <td>user-selected</td>
                                        <td>UserInfo | null</td>
                                        <td>用户选择时触发</td>
                                    </tr>
                                    <tr>
                                        <td>search</td>
                                        <td>string</td>
                                        <td>搜索时触发</td>
                                    </tr>
                                </tbody>
                            </v-table>
                        </v-expansion-panel-text>
                    </v-expansion-panel>
                </v-expansion-panels>
            </v-card-text>
        </v-card>
    </v-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SelectUser from '@/components/SelectUser.vue';
import type { UserInfo } from '@/components/SelectUser.vue';

// 响应式数据
const selectedUser1 = ref<UserInfo | null>(null);
const selectedUser2 = ref<UserInfo | null>(null);
const selectedUser3 = ref<UserInfo | null>(null);
const selectedUser4 = ref<UserInfo | null>(null);
const selectedUser5 = ref<UserInfo | null>(null);
const selectedUser6 = ref<UserInfo | null>(null);

const selectedDepartment = ref('');

// 部门列表
const departments = [
    '技术部',
    '产品部',
    '运营部',
    '人事部',
    '财务部'
];

// 事件处理函数
function handleUserSelect1(user: UserInfo | null) {
    console.log('基础用法 - 选中用户:', user);
}

function handleUserSelect2(user: UserInfo | null) {
    console.log('带邮箱显示 - 选中用户:', user);
}

function handleUserSelect3(user: UserInfo | null) {
    console.log('按部门过滤 - 选中用户:', user);
}

function handleUserSelect4(user: UserInfo | null) {
    console.log('排除用户 - 选中用户:', user);
}

function handleUserSelect5(user: UserInfo | null) {
    console.log('紧凑样式 - 选中用户:', user);
}

function handleUserSelect6(user: UserInfo | null) {
    console.log('活跃用户 - 选中用户:', user);
}
</script>

<style scoped>
.code-block {
    background-color: #f5f5f5;
    padding: 16px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre;
}

:deep(.v-expansion-panel-text__wrapper) {
    padding: 16px !important;
}
</style>